<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>10_Canvas-绘制线端</title>
<style>
  body{
    margin: 0;
    padding: 0;
    background-image: url(../../images/grid.png);
  }
  canvas{
    background-color: rgba(255, 0, 0, 0.1);
  }
</style>
</head>
<body>

<canvas id="tutorial" width="300" height="300px">
  你的浏览器不兼容Canvas,请升级您的浏览器!
</canvas>
<script>
  window.onload = function(){
    // 1. 获取canvas元素
    var canvas = document.getElementById('tutorial');
    // 2. 获取绘图上下文
    var ctx = canvas.getContext('2d');

    ctx.lineWidth = 10; // 设置线宽
    ctx.strokeStyle = 'red'; // 设置描边颜色
    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.lineTo(200, 50);
    ctx.stroke();

    ctx.lineWidth = 20; // 修改线宽
    ctx.strokeStyle = 'blue'; // 修改描边颜色
    ctx.beginPath();
    ctx.moveTo(50, 100); // 重新开始一条路径
    ctx.lineTo(200, 100);
    ctx.stroke();
  }

</script>

</body>
</html>